<!-- 功能：授权密钥页面 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月30日 10:29:36 -->
<template>
  <a-layout class="y-layout">
    <topHeader></topHeader>
    <a-layout-content class="y-layout-content">
      <a-form :label-col="{ span:6 }" :wrapper-col="{span: 14}">
        <a-form-item label="版本">
          RESD-xxx
        </a-form-item>
        <a-form-item label="产品序列号">
          1827391293hhi
        </a-form-item>
        <a-form-item label="产品唯一标识">
          1827391293hhi
        </a-form-item>
        <a-form-item label="控制器" v-bind="validateInfos.controller">
          <a-radio-group v-model:value="modelRef.controller" name="radioGroup">
            <a-radio value="controller-1">控制器1</a-radio>
            <a-radio value="controller-2">控制器2</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="设备注册号" v-bind="validateInfos.sheBeiZhuCeHao">
          <a-row :gutter="12">
            <a-col flex="auto">
              <a-input v-model:value="modelRef.sheBeiZhuCeHao" placeholder="请输入设备注册号"></a-input>
            </a-col>
            <a-col flex="200px">
              <a-space>
                <a-button type="link" class="y-btn">确定</a-button>
                <a-button type="link" class="y-btn">导入许可</a-button>
              </a-space>
            </a-col>
          </a-row>

        </a-form-item>
      </a-form>
      <a-card>
        <a-row align="middle">
          <a-col :span="16">
            <a-space>
              <a-button type="link" class="y-btn" @click="">
                <template #icon>
                  <delete-outlined />
                </template>
                批量删除
              </a-button>
            </a-space>
          </a-col>
          <a-col :span="8">
          </a-col>
        </a-row>
        <a-table bordered :data-source="dataSource" :columns="columns" class="y-table" :pagination="false" :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }">
          <template #bodyCell="{ text, column, record }">
            <template v-if="column.key === 'shanChu'">
              <a-button type="link" @click="shanChu">
                <template #icon>
                  <delete-outlined />
                </template>
              </a-button>
            </template>
          </template>
        </a-table>

        <div class="y-bottom">
          <a-button type="link" class="y-btn" @click="fanHuiDengLuJieMian">
            <template #icon>
              <delete-outlined />
            </template>
            返回登录界面
          </a-button>
        </div>

      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
const router = useRouter();
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  controller: 'controller-1',
  sheBeiZhuCeHao: ''
})

const rulesRef = reactive({
  controller: [
    {
      required: true,
      message: '请选择控制器'
    }
  ],
  sheBeiZhuCeHao: [
    {
      required: true,
      message: '请输入设备注册号'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('授权密钥>>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

// 表格列
const columns = ref([
  {
    title: '功能模块',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: 'License',
    dataIndex: 'license',
    key: 'license',
    align: 'center'
  },
  {
    title: '删除',
    dataIndex: 'shanChu',
    key: 'shanChu',
    align: 'center'
  },
  {
    title: '许可剩余期限',
    dataIndex: 'xuKeShengYuQiXian',
    key: 'xuKeShengYuQiXian',
    align: 'center'
  },
  {
    title: '控制器',
    dataIndex: 'kongZhiqi',
    key: 'kongZhiqi',
    align: 'center'
  }
])

// 表格数据
const dataSource = ref([
  {
    name: 'xx',
    license: 'xxx',
    shanChu: 'xxx',
    xuKeShengYuQiXian: '10 日',
    kongZhiqi: 'xxx'
  }
])

const shanChu = () => {
  Modal.confirm({
    title: '确认操作',
    icon: h(ExclamationCircleOutlined),
    content: '您确定要删除License?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}

const state = reactive({
  selectedRowKeys: []
})
const onSelectChange = selectedRowKeys => {
  console.log('授权密钥 >  选择用户多选改变', selectedRowKeys)
  state.selectedRowKeys = selectedRowKeys
}
const onSubmitXuanZeYongHu = () => {}

const onCancelXuanZeYongHu = () => {}

const fanHuiDengLuJieMian = () => {
      router.push("/login")
}
</script>

<style scoped lang='scss'>
.ant-row {
  margin-bottom: 10px;
}
.y-bottom {
  margin-top: 20px;
  text-align: center;
}
</style>